<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增考核人员')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-personnel-add" class="form-horizontal">
        <input name="deptId" type="hidden" id="treeId"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">姓名：</label>
                    <div class="col-sm-8">
                        <input name="examPersonnel" id="examPersonnel" placeholder="请输入考核人姓名" class="form-control"
                               type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">出生日期：</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" id="birthday" name="birthday" placeholder="请选择出生日期" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">性别：</label>
                    <div class="col-sm-8">
                        <select name="gender" id="gender" class="form-control m-b"
                                th:with="type=${@dict.getType('sys_user_sex')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">人员类别：</label>
                    <div class="col-sm-8">
                        <select name="personnelCategory" id="personnelCategory" class="form-control m-b"
                                th:with="type=${@dict.getType('sys_examin_personnel_category')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">是否参与考核：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="attend" name="attend" checked>
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-7 control-label">注：【年龄】和【单杠项目】根据出生日期自动计算得到</label>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
</body>
<script>
    var prefix = ctx + "examine/personnel";

    $("#form-personnel-add").validate({
    	onkeyup: false,
    	rules:{
            examPersonnel:{
    			minlength: 2,
    			maxlength: 20,
    			remote: {
                    url: prefix + "/checkPersonnelNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                    	"examPersonnel": function() {
                            return $.common.trim($("#examPersonnel").val());
                        }
                    },
                    dataFilter: function(data, type) {
                    	return $.validate.unique(data);
                    }
                }
    		}
    	},
    	messages: {
            "examPersonnel": {
                remote: "考核人员已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        var examPersonnel = $("#examPersonnel").val();
        var birthday = $("#birthday").val();
        var gender = $("#gender").val() === "0" ? "男" : "女";
        var personnelCategory = $("#personnelCategory").val();
        var attend = $("input[id='attend']").is(':checked') === true ? 1 : 0;

        var data = [];

        data.push({"name": "examPersonnel", "value": examPersonnel});
        data.push({"name": "birthday", "value": birthday});
        data.push({"name": "gender", "value": gender});
        data.push({"name": "personnelCategory", "value": personnelCategory});
        data.push({"name": "attend", "value": attend});
        $.operate.saveTab(prefix + "/add", data);
    }


    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }

    $(function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#birthday'
            });
        });
    })
</script>
</html>
